<template>
  <div>
    <div class="lm_filter">
      <el-button
        type="primary"
        round
        icon="el-icon-circle-plus-outline"
        @click="add()"
        >添加资源</el-button
      >
    </div>
    <el-table 
      :data="result.table" 
      style="width: 100%"
      row-key="id"
      :tree-props="{children: 'children', haschildren: 'haschildren'}"
    >
      <el-table-column 
        label="ID" 
        prop="id" 
        width="120"
      ></el-table-column>
      <el-table-column 
        label="资源名" 
        prop="name" 
      ></el-table-column>
      <el-table-column 
        label="前端地址" 
        prop="frontUrl" 
      ></el-table-column>
      <el-table-column 
        label="后端地址" 
        prop="backUrl" 
      ></el-table-column>
      <el-table-column 
        label="含有下级" 
      >
        <template slot-scope="scope">
          <span v-if="scope.row.haschildren === 1">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column 
        label="资源类型" 
      >
        <template slot-scope="scope">
          <span v-if="scope.row.type === 1">目录</span>
          <span v-else>按钮</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="155">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.haschildren === 1"
            @click="add(scope.row.id)"
            type="primary"
            size="mini"
            plain
          >子权限</el-button>
          <el-button
            @click="edit(scope.row.id)"
            type="primary"
            size="mini"
            plain
          >修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="editdialog.title"
      :visible.sync="editdialog.show"
      :close-on-click-modal="false"
    >
      <ResourceEdit
        v-if="editdialog.show"
        :dialogshow.sync="editdialog.show"
        @getTable="getTable()"
        :editId="editdialog.id"
        :parentId="editdialog.parentId"
      ></ResourceEdit>
    </el-dialog>
  </div>
</template>

<script>
import ResourceEdit from "./edit"
export default {
  name: "",
  components: {
    ResourceEdit,
  },
  data() {
    return {
      result: {
        table: [],
      },
      editdialog: {
        title: "编辑角色信息",
        show: false,
        id: null,
        parentId: null
      }
    }
  },
  created() {
    this.getTable()
  },
  watch: {
    params: {
      handler: function () {
        this.getTable()
      },
      deep: true,
    },
  },
  methods: {
    getTable() {
      this.$axios.get("/ums-resource/list", this.params, (response) => {
        this.result.table = response.obj
      });
    },
    add(id) {
      this.editdialog.id = null
      this.editdialog.parentId = id
      this.editdialog.show = true
      this.editdialog.title = '添加资源信息'
    },
    edit(id) {
      this.editdialog.show = true
      this.editdialog.title = '修改资源信息'
      this.editdialog.id = id
      this.editdialog.parentId = null
    }
  },
};
</script>

<style>
</style>
